<template>
    <view>
        <view class="list">
            <!--<view class="vip_info" @click="handleInfoClick">会员说明</view>-->
            <view :class="'item '+ `type-${item.type}`" v-for="(item,i) in list" :key="i" @click="handleCardCick(item)">
                <image :src="item.type | BgFilter" class="bg"/>
                <view class="left">
                    <image :src="item.type | LogoFilter" class="icon"/>
                </view>
                <view class="right">
                    <view class="title">
                        <text>{{ item.cardName }}</text>
                        <text class="text-df text-btn" @click.stop="showDialog(item)">使用说明</text>
                    </view>

                    <view class="desc" v-if="item.type == 2">折扣：{{ parseFloat((item.discount * 10).toFixed(2)) }}折</view>

                    <view class="bottom">
                        <view class="time" v-if="item.cycle == 0">永久有效</view>
                        <view class="time" v-else>有效期 {{ item.cycle }} 天</view>

                        <view class="money">
                            <text>￥</text>
                            <text class="number">{{ item.price }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <list-loading v-if="loading"/>
            <list-empty v-if="!loading && (!list || list.length == 0)"/>
            <list-load-over v-else-if=" loadOver"/>
        </view>

        <my-dialog content="确定要购买此会员卡吗？" ref="confirm" show-cancel/>
        <my-dialog ref="dialog" mode="html"/>
    </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";
import MyDialog from "@/components/dialog";

export default {
    components: {MyDialog, ListLoadOver, ListEmpty, ListLoading},
    name: "vip-list",
    data() {
        return {
            tabs: ["储蓄卡", "特权卡", "次数卡"],
            list: [],
            page: 0,
            loading: false,
            loadOver: false,
            id: null,
        }
    },
    onLoad(options) {
        this.id = options.id
        this.getList();
    },
    methods: {
        showDialog(item){
            this.$refs.dialog.show(item.remark)
        },
        handleTabClick(i) {
            this.currentTab = i;
            this.clear();
            this.getList();
        },
        handleInfoClick() {
            uni.navigateTo({url: `/pages/index/my/vip/info/index`})
        },
        clear() {
            this.page = 0;
            this.list = [];
            this.loadOver = false;
            this.loading = false;
        },
        getList() {
            if (this.loadOver) return;
            this.loading = true;
            Api.getShopVipCard(this.id, ++this.page).then(res => {
                this.list.push(...res)
                if (res.length < 10) this.loadOver = true;
            }).finally(() => this.loading = false)
        },
        handleCardCick(item) {
            this.$refs.confirm.show().then(res => {
                Api.buyCard(item.id).then(res => {
                    this.core.wxMpPay(res);
                })
            })
        },
    },
    computed: {
        type() {
            return this.currentTab;
        }
    },
    filters: {
        TitleFilter: function (value) {
            let res = "";
            if (value === 1) res = "储蓄卡"
            else if (value === 2) res = "特权卡"
            else if (value === 3) res = "理发卡"
            return res;
        },
        LogoFilter: function (value) {
            return `/static/img/qt/card_logo_${value}.png`;
        },
        BgFilter: function (value) {
            return `/static/img/qt/card_bg_${value}.png`;
        },
    },

    onPullDownRefresh() {
        this.clear();
        this.getList();
    },
    onReachBottom() {
        this.getList();
    },
}
</script>

<style scoped lang='scss'>


.tabs {
    background-color: white;
    display: flex;

    .tab-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: r(18px 0);
        border-bottom: 2px solid transparent;


        &.current {
            border-color: $primary-color;
        }

    }
}


.list {
    padding-top: r(20px);
    padding-bottom: calc(env(safe-area-inset-bottom) + #{r(30px)});

    .vip_info {
        text-align: right;
        font-size: r(30px);
        color: #7B5533;
        padding-bottom: r(20px);
        margin-right: r(30px);
    }

    .item {
        box-shadow: r(3px 4px 32px 0) rgba(95, 95, 95, 0.26);
        border-radius: r(10px);
        margin: r(0 30px 30px 30px);
        padding: r(40px);
        display: flex;
        height: r(220px);
        position: relative;

        & > .bg {
            position: absolute;
            bottom: r(-10px);
            left: r(-10px);
            width: r(98px);
            height: r(98px);
        }

        &.type-1 {
            background: linear-gradient(-81deg, #2D8DFA 0%, #3EB4F9 100%);
        }

        &.type-2 {
            background: linear-gradient(-85deg, #15ACBB 0%, #01CBC5 100%);
        }

        &.type-3 {
            background: linear-gradient(-85deg, #ED7B31 0%, #F5A443 100%);
        }


        .icon {
            height: r(90px);
            width: r(90px);
            border-radius: 50%;
            background-color: white;
        }

        .right {
            flex: 1;
            margin-left: r(40px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .title {
                color: #FFFFFF;
                font-size: r(36px);
                display: flex;
                justify-content: space-between;
            }



            .bottom {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .time {
                    font-size: r(30px);
                    color: rgba(#F2F2F2, 0.53);
                }

                .money {
                    color: #ffffff;

                    .number {
                        font-size: r(50px);
                    }
                }
            }

            .desc {
                font-size: r(30px);
                color: rgba(#222, 0.53);
            }
        }
    }
}
</style>